
const templateCode = `<v-crud
  ref="crud"
  :table-config="tableConfig"
  :search-bar-config="searchBarConfig"
>
  <template #table-top>
    <el-button type="primary" @click="refreshDicts">刷新字典</el-button>
  </template>
</v-crud>`

export const DictsUsage = {
  template: `
    <el-card header="字典" ref="container">
      ${templateCode}
      <CodeCollapse :codes="[templateCode, scriptCode]" />
    </el-card>
  `,

  data() {
    const tableData = [{
      name: '王小虎',
      role: 1,
      status: 1,
      id: 1
    }, {
      name: '王小虎',
      role: 2,
      status: 1,
      id: 2
    }, {
      name: '王小虎',
      role: 3,
      status: 2,
      id: 3
    }, {
      name: '王小虎',
      role: 4,
      status: 1,
      id: 4
    }]
    const statusList = [
      { label: '正常', value: 1, color: 'green' },
      { label: '封禁', value: 2, color: 'red' },
    ]
    const roles = [
      { label: '角色1', value: 1 },
      { label: '角色2', value: 2 },
      { label: '角色4', value: 4 },
      { label: '角色3', value: 3 },
    ]

    return {
      // 表格配置
      tableConfig: {
        requestApi(query) {
          console.log(query); // 包括页数、条数在内的查询参数
          return new Promise(r => {
            setTimeout(() => {
              r({
                data: tableData,
                count: 3,
                pageSize: 20,
                pages: 1
              })
            }, 800)
          })
        },
        columns: [
          { label: '姓名', prop: 'name' },
          { label: '状态', prop: 'status', dicts: statusList },
          {
            label: '角色',
            prop: 'role',
            dicts: async() => {
              console.log('异步获取角色列表');
              return new Promise(r => {
                setTimeout(() => {
                  r(roles)
                })
              })
            }
          },
        ]
      },

      // 搜索栏配置
      searchBarConfig: {
        items: ['role', 'status']
      },
    }
  },

  computed: {
    templateCode() {
      return `<template>
  ${templateCode}
</template>`
    },
    scriptCode() {
      const { data } = DictsUsage
      return `<script>
export default {
  ${data.toString()},
  methods: {
    refreshDicts() {
      this.$refs.crud.refreshDicts('role')
    }
  }
}
</script>`
    }
  },

  methods: {
    refreshDicts() {
      this.$refs.crud.refreshDicts('role')
    }
  }
}